<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>产品列表</title>
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/font.css">
		<link rel="stylesheet" type="text/css" href="css/madieer.css">
		<script type="text/javascript" src="js/w_rem.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/vue@3.2.37.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.3.min.js"></script>
		<script type="text/javascript" src="js/wow.js"></script>
		<script type="text/javascript" src="js/jzt_common.js"></script>
		<script type="text/javascript" src="js/madieer.js"></script>
	</head>
	<body>
		<div id="goods-app" v-cloak>
			<header-app></header-app>
			<div class="ban1-a1">
				<div class="ban1-a2 i100"><img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220730/6f1fb9a1fd6e0dc2cde9838c6083917b.jpg"><img
						src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220730/a521bc42d2490076073dc72a55ce45b7.jpg"></div>
				<div class="ban1-a3 wow fadeInUp" data-wow-delay="0.3s">马迭尔面包</div>
				<div class="ban1-a4 wow fadeInUp" data-wow-delay="0.4s"></div>
				<div class="ban1-a5 wow fadeInUp" data-wow-delay="0.5s">bread</div>
			</div>
			<div class="t1-a1">
				<div class="t1-a2 i100 wow fadeInUp" data-wow-delay="0.3s"><img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220727/5d9ecea45467d2718d71ff37f12d7df1.jpg"></div>
				<div class="t1-a3 wow fadeInUp" data-wow-delay="0.4s">面包</div>
				<div class="t1-a4 wow fadeInUp" data-wow-delay="0.5s">打造既有传统风味又符合现代口味的面包</div>
			</div>
			<div class="bread1-a1 clear">
				<div class="bread1-a2 wow fadeInUp" v-for="(item,index) in breadList">
					<div class="bread1-a3 i100">
						<img :src="item.bg_img">
						<div></div>
					</div>
					<div class="bread1-a4">
						<div>
							<div>
								<div class="bread1-a5">{{ item.title }}</div>
								<div class="bread1-a6 i100">
									<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220730/1482a95bd47f8c25e481392ef8e92f03.jpg"></div>
								<div class="bread1-a7">{{ item.label }}</div>
								<div class="bread1-a8">{{ item.intro }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="components/headerApp.js" type="text/javascript" charset="utf-8"></script>
		<script>
			Vue.createApp({
				setup() {
					let breadList = Vue.ref([])  // 产品列表
					let params = Vue.ref({ // datas 参数
						page: 1,
						limit: 3,
						sort: 'sortAsc',
						category_id: '635353fc16cdb1829c047d17'
					})
					// 获取产品列表
					const getGoodsList = () => {
						requestData('goods', params.value, (res) => {
							breadList.value = res.data
						})
					}
					Vue.onBeforeMount(() => {
						getGoodsList()
					})
					// DOM挂载完毕
					Vue.onMounted(() => {
						const getGoodsListByName = () => {
							requestData('goods', {search_name: '包', exact_search: true}, (res) => {
								console.log(res, 'res-------------');
							})
						}
						getGoodsListByName()
					})
					return { breadList }
				}
			}).component(
				// 注册的名字
				'HeaderApp',
				// 组件的实现
				headerApp
			).mount('#goods-app')
		</script>
	</body>
</html>
